<template>
	<div>
		<!-- 座位人数筛选 -->
		<br />
		<el-row :gutter="20">
			<el-col :span="18" style="height:57.5rem;overflow:auto;">
				<div class="divCss">
					<el-card shadow="never">
						<el-tabs type="card" v-model="activeStoreType" @tab-click="querySeatByStoreTypeId">
							<el-tab-pane v-for="i in storeTypeList" :key="i.id" :label="i.storeTypeName" :name="i.id">
								<el-tabs type="card" v-model="activeName" @tab-click="querySeatById">
									<el-tab-pane label="全部" name="0">
										<el-row :gutter="12">
											<el-col :span="4" v-for="item in dinningTableList" :key="item.id">
												<a style="cursor: pointer;text-decoration: none;" @click="selectDiningTable(item)">
													<el-card :shadow="shadow" style="background-color:#90EE90">
														<div class="tableName">
															<el-checkbox-group @change="getDeskIdList" style="font-size: 0.0625rem;" v-model="tableList">
																<el-checkbox :label="item.id"></el-checkbox>
															</el-checkbox-group>
														</div>
														<div class="seatNum">{{ item.diningTableNo }}</div>
														<div class="seatNum">{{ item.seatNum }}人桌</div>
													</el-card>
												</a>
												<br />
											</el-col>
										</el-row>
									</el-tab-pane>
									<el-tab-pane v-for="item in regionList" :key="item.id" :label="item.regionName" :name="item.id">
										<el-row :gutter="12">
											<el-col :span="4" v-for="items in dinningTableList" :key="items.id">
												<a style="cursor: pointer;text-decoration: none;" @click="selectDiningTable(items)">
													<el-card :shadow="shadow" style="background-color:#90EE90">
														<div class="tableName">
															<el-checkbox-group @change="getDeskIdList" style="font-size: 0.0625rem;" v-model="tableList">
																<el-checkbox :label="items.id"></el-checkbox>
															</el-checkbox-group>
														</div>
														<div class="seatNum">{{ items.diningTableNo }}</div>
														<div class="seatNum">{{ items.seatNum }}人桌</div>
													</el-card>
												</a>
												<br />
											</el-col>
										</el-row>
									</el-tab-pane>
								</el-tabs>
							</el-tab-pane>
              <el-pagination
                style="text-align: center;"
                background
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="32"
                :page-size="pageSize"
                :total="totalPage"
                layout="prev, next"
              ></el-pagination>
						</el-tabs>
					</el-card>
				</div>
			</el-col>
			<el-col :span="6">
				<el-card shadow="never"style="height: 57.5rem;overflow: auto;">
					<AddReserveDesk @refreshDataList="getDataList()" ref="DeskList"></AddReserveDesk>
				</el-card>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	import AddReserveDesk from './tstorereservedesk-add-or-update.vue'
export default {
	components: {
		AddReserveDesk
	},
	data() {
		return {
			dataList: [],
			seatNumList: [],
			regionList: [],
			activeName: '0',
			dinningTableList: [],
			shadow: 'never',
			KeyBoardVisible: false,
			PayComponentVisible: false,
			seatComVisile: false,
			diningTableNo: '',
			eatNumber: '',
			orderNo: '',
			foodList: [],
			dataForm: {
				orderId: '',
				deskId: '',
				peopleNum: '',
				openTime: ''
			},
			openDeskInfo: null,
			orderInfo: '',
			clickCardCss: '',
			foodInfo: null,
			copyOrderVisile: false,
			storeTypeList:[],
			activeStoreType:'0',
			tableList:[],
      pageIndex: 1,
      pageSize: 30,
      totalPage: 0,
      regionId:'0'
		};
	},
	created() {
		this.getDataList();
	},
	methods: {
		getDeskIdList(){
			this.$nextTick(() => {
				this.$refs.DeskList.getDeskIdList(this.tableList)
			})
		},

    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },

		//选择餐台
		selectDiningTable(item) {
			this.openDeskInfo = item;
			this.diningTableNo = item.diningTableNo;
			this.diningTableId = item.id;
		},

		querySeatById(tab, event) {
      if (this.pageIndex > 1) {
        this.pageIndex = 1;
      }
		  this.regionId = tab.name
			var status = 0;
			this.$http({
				url: this.$http.adornUrl('/store/tstorediningtable/querySeatById'),
				method: 'get',
				params: this.$http.adornParams({
					status:status,
					storeTypeId: this.activeStoreType,
					seatNum: 0,
					regionId: tab.name,
          page: this.pageIndex,
          limit: this.pageSize
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dinningTableList = data.data.dinningTableList.records;
          this.totalPage = data.data.dinningTableList.total;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
			});
		},

		querySeatByStoreTypeId(tab,event){
      if (this.pageIndex > 1) {
        this.pageIndex = 1;
      }
			this.$http({
				url: this.$http.adornUrl('/store/tstorediningtable/querySeatById'),
				method: 'get',
        params: this.$http.adornParams({
          status: 1,
          storeTypeId: this.activeStoreType,
          seatNum: 0,
          regionId: this.regionId,
          page: this.pageIndex,
          limit: this.pageSize
        })
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.data;
					this.seatNumList = data.data.seatNumList;
					this.regionList = data.data.regionList;
					this.dinningTableList = data.data.dinningTableList.records;
          this.totalPage = data.data.dinningTableList.total;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
			});
		},


		getDataList() {
			this.tableList = []
			//餐厅类型
			this.$http({
			  url: this.$http.adornUrl('/store/tstoretype/list'),
			  method: 'get',
			}).then(({data}) => {
			  if (data && data.code === 0) {
			    this.storeTypeList = data.page.list
				this.activeStoreType = data.page.list[0].id

				this.$http({
					url: this.$http.adornUrl('/store/tstorediningtable/listSeat'),
					method: 'get',
					params: this.$http.adornParams({
						status: 0,
						storeTypeId: this.activeStoreType,
            seatNum: 0,
            regionId: this.regionId,
            page: this.pageIndex,
            limit: this.pageSize
					})
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.dataList = data.data;
						this.seatNumList = data.data.seatNumList;
						this.regionList = data.data.regionList;
						this.dinningTableList = data.data.dinningTableList.records;
            this.totalPage = data.data.dinningTableList.total;
					} else {
						this.dataList = [];
						this.totalPage = 0;
					}
				});
			  } else {
			    this.storeTypeList = []
			  }
			})

		}
	}
};
</script>

<style>
.tableName {
	display: -moz-box; /*兼容Firefox*/
	display: -webkit-box; /*兼容FSafari、Chrome*/

	-moz-box-align: center; /*兼容Firefox*/
	-webkit-box-align: center; /*兼容FSafari、Chrome */

	-moz-box-pack: center; /*兼容Firefox*/
	-webkit-box-pack: center; /*兼容FSafari、Chrome */

	font-size: 18px;
	font-weight: 3000;
}
.seatNum {
	text-align: center;
}

.footer {
	height: 100px;

	width: 100%;

	background-color: #ddd;

	position: fixed;

	bottom: 0;
}
.cursor {
	cursor: pointer;
	text-decoration: none;
}

.divCss {
}
</style>
